/* stylelint-disable import-notation */
@import 'tailwindcss';
@import './tokens.css';
@import './transitions.css';

@plugin '@formkit/themes/tailwindcss';
@plugin '../../../build/zammadTailwindPlugin.js';

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] * ));

:root {
  /* LIMITED support -> opt in modern browsers @see https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size */

  /* allows animating of intrinsic absolute <-> relative units */
  interpolate-size: allow-keywords;
}

@layer base {
  /* Override autofill styles in Firefox. */
  :-moz-autofill {
    background: transparent;
  }

  /* Override autofill styles in Webkit-based browsers. */
  :-webkit-autofill {
    -webkit-text-fill-color: var(--color-black);
    -webkit-background-clip: text;
    caret-color: var(--color-black);
  }

  [data-theme='dark'] :-webkit-autofill {
    -webkit-text-fill-color: var(--color-white);
    caret-color: var(--color-white);
  }

  /* No-op animation for hooking into autofill mechanism in Webkit-based browsers. */
  :-webkit-autofill {
    animation-name: onAutoFillStart;
  }

  :not(:-webkit-autofill) {
    animation-name: onAutoFillEnd;
  }

  /* Better-looking typography on high-density screens. */
  body {
    @apply antialiased;
  }

  a {
    @apply text-blue-800 focus-visible:rounded-xs focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800;
  }

  @keyframes onAutoFillStart {
    from {
    }

    to {
    }
  }

  @keyframes onAutoFillEnd {
    from {
    }

    to {
    }
  }
}

@layer components {
  .grid-cols-2-uneven > *:nth-last-child(1):nth-child(odd) {
    grid-column: span 2;
  }

  input::placeholder,
  textarea::placeholder {
    @apply text-stone-200 dark:text-neutral-500;
  }

  /*
    Responsive multi-column mode for form groups:
    - compatibility layer for object attributes and form columns via legacy `.formGroup--halfSize` class
    - container query via optional TW `@container/form-group` class
  */
  .form-group .formkit-outer {
    /* stylelint-disable-next-line scss/operator-no-unspaced */
    @apply col-span-2 @lg/form-group:col-span-1;

    /* Optional full-width style for specific fields. */
    &[data-type='editor'],
    &[data-type='file'],
    &:last-of-type:nth-of-type(odd) {
      /* stylelint-disable-next-line scss/operator-no-unspaced */
      @apply @lg/form-group:col-span-2;
    }

    &.form-group-single-column {
      @apply col-span-1;
    }
  }

  /*
    Use specific selector for dirty flag styling due to nested FormKit fields.
  */
  [data-theme='dark']
    .form-group.form-group-mark-dirty
    > .formkit-outer[data-dirty]
    > .formkit-block
    > .formkit-wrapper
    > .formkit-inner {
    &::before {
      background: repeating-linear-gradient(
          45deg,
          var(--color-gray-200),
          var(--color-gray-200) 5px,
          transparent 5px,
          transparent 10px
        )
        repeat center;
    }
  }

  .form-group.form-group-mark-dirty
    > .formkit-outer[data-dirty]
    > .formkit-block
    > .formkit-wrapper
    > .formkit-inner {
    @apply relative;

    &::before {
      @apply absolute top-0 bottom-0 w-2 rounded-ss-lg rounded-es-lg content-[''] ltr:left-0 rtl:right-0;

      background: repeating-linear-gradient(
          45deg,
          var(--color-white),
          var(--color-white) 5px,
          transparent 5px,
          transparent 10px
        )
        repeat center;
      mask-image: linear-gradient(
        90deg,
        var(--color-black),
        var(--color-black) 0.4rem,
        transparent 0.4rem,
        transparent
      );
    }
  }

  .tooltip {
    @apply fixed z-50 w-fit -translate-y-2 rounded-md border border-neutral-100 bg-blue-200 px-2 py-1 text-xs leading-snug text-wrap text-gray-100 opacity-0 transition-all select-none dark:border-gray-900 dark:bg-gray-700 dark:text-neutral-400;
  }

  .tooltip-animate {
    @apply translate-y-0 opacity-100;
  }

  /*
    Editor content styles
  */
  .Content .inner-article-body,
  .ProseMirror {
    div[data-signature-marker] {
      display: none;
    }

    &:focus-visible {
      outline: none;
    }

    p {
      @apply my-2 min-h-5;
    }

    blockquote {
      @apply border-s-5 border-s-neutral-100 dark:border-s-gray-500 px-3 py-px;

      .Content--customer & {
        @apply border-s-blue-300 dark:border-s-stone-700;
      }
    }

    ol {
      list-style: decimal;
    }

    ul {
      list-style: disc;
    }

    ol,
    ul {
      @apply pb-2;

      padding-inline-start: 0.5rem;
      list-style-position: inside;

      p {
        display: inline;
      }
    }

    h1 {
      @apply mt-2 mb-1 text-xl font-bold;
    }

    h2 {
      @apply mt-2 mb-1 text-base font-bold;
    }

    h3 {
      @apply mt-2 mb-1 text-sm font-bold;
    }

    a {
      @apply text-blue-800 hover:underline hover:text-blue-850 hover:dark:text-blue-600;
    }

    [dir='rtl'] {
      text-align: right;
    }

    [dir='ltr'] {
      text-align: left;
    }

    pre {
      @apply bg-black/10 dark:bg-black/20 rounded-md my-2 p-2.5;

      code {
        @apply bg-transparent p-0;
      }
    }

    code {
      @apply bg-black/10 font-mono dark:bg-black/20 rounded-md p-0.75;
    }

    table.zammad-table,
    &:not(.Content .inner-article-body) table {
      @apply max-w-full border-2 dark:border-neutral-500 border-neutral-700 border-collapse table-fixed w-full my-2 overflow-hidden;

      td,
      th {
        @apply min-w-[1em] border dark:border-neutral-500 border-neutral-700 align-top relative py-[3px] px-[5px] box-border;
      }

      th {
        @apply font-bold text-start dark:bg-black/20 bg-black/10;
      }
    }

    table td,
    table th {
      > * {
        @apply m-0;
      }
    }

    hr {
      @apply my-2 h-px bg-stone-200 dark:bg-neutral-500 text-[0px] border-none;
    }

    [data-theme='dark'] & {
      /* neutral 1 */
      [style*='color:rgb(102, 102, 102)'],
      [style*='color: rgb(102, 102, 102)'] {
        color: rgb(204, 204, 204) !important;
      }

      /* neutral 2 is the same for both themes */

      /* neutral 3 */
      [style*='color:rgb(204, 204, 204)'],
      [style*='color: rgb(204, 204, 204)'] {
        color: rgb(102, 102, 102) !important;
      }

      /* red 1 */
      [style*='color:rgb(239, 68, 68)'],
      [style*='color: rgb(239, 68, 68)'] {
        color: rgb(241, 152, 167) !important;
      }

      /* orange 1 */
      [style*='color:rgb(205, 121, 45)'],
      [style*='color: rgb(205, 121, 45)'] {
        color: rgb(246, 211, 102) !important;
      }

      /* green 1 */
      [style*='color:rgb(80, 140, 70)'],
      [style*='color: rgb(80, 140, 70)'] {
        color: rgb(170, 214, 164) !important;
      }

      /* blue 1 */
      [style*='color:rgb(48, 100, 172)'],
      [style*='color: rgb(48, 100, 172)'] {
        color: rgb(122, 202, 247) !important;
      }

      /* purple 1 */
      [style*='color:rgb(107, 41, 132)'],
      [style*='color: rgb(107, 41, 132)'] {
        color: rgb(201, 135, 236) !important;
      }

      /* red 2 */
      [style*='color:rgb(235, 61, 79)'],
      [style*='color: rgb(235, 61, 79)'] {
        color: rgb(237, 97, 118) !important;
      }

      /* orange 2 */
      [style*='color:rgb(233, 159, 59)'],
      [style*='color: rgb(233, 159, 59)'] {
        color: rgb(243, 193, 79) !important;
      }

      /* green 2 */
      [style*='color:rgb(95, 159, 84)'],
      [style*='color: rgb(95, 159, 84)'] {
        color: rgb(127, 187, 118) !important;
      }

      /* blue 2 */
      [style*='color:rgb(70, 147, 231)'],
      [style*='color: rgb(70, 147, 231)'] {
        color: rgb(91, 174, 243) !important;
      }

      /* purple 2 */
      [style*='color:rgb(153, 62, 195)'],
      [style*='color: rgb(153, 62, 195)'] {
        color: rgb(179, 91, 223) !important;
      }

      /* red 3 */
      [style*='color:rgb(237, 97, 118)'],
      [style*='color: rgb(237, 97, 118)'] {
        color: rgb(235, 61, 79) !important;
      }

      /* orange 3 */
      [style*='color:rgb(243, 193, 79)'],
      [style*='color: rgb(243, 193, 79)'] {
        color: rgb(233, 159, 59) !important;
      }

      /* green 3 */
      [style*='color:rgb(127, 187, 118)'],
      [style*='color: rgb(127, 187, 118)'] {
        color: rgb(95, 159, 84) !important;
      }

      /* blue 3 */
      [style*='color:rgb(91, 174, 243)'],
      [style*='color: rgb(91, 174, 243)'] {
        color: rgb(70, 147, 231) !important;
      }

      /* purple 3 */
      [style*='color:rgb(179, 91, 223)'],
      [style*='color: rgb(179, 91, 223)'] {
        color: rgb(153, 62, 195) !important;
      }

      /* red 4 */
      [style*='color:rgb(241, 152, 167)'],
      [style*='color: rgb(241, 152, 167)'] {
        color: rgb(239, 68, 68) !important;
      }

      /* orange 4 */
      [style*='color:rgb(246, 211, 102)'],
      [style*='color: rgb(246, 211, 102)'] {
        color: rgb(205, 121, 45) !important;
      }

      /* green 4 */
      [style*='color:rgb(170, 214, 164)'],
      [style*='color: rgb(170, 214, 164)'] {
        color: rgb(80, 140, 70) !important;
      }

      /* blue 4 */
      [style*='color:rgb(122, 202, 247)'],
      [style*='color: rgb(122, 202, 247)'] {
        color: rgb(48, 100, 172) !important;
      }

      /* purple 4 */
      [style*='color:rgb(201, 135, 236)'],
      [style*='color: rgb(201, 135, 236)'] {
        color: rgb(107, 41, 132) !important;
      }
    }
  }

  /*
    Reset styles for nested tables in blockquotes and signatures.
      There is currently no way to determine whether they are internal or external.
      These tables will not be assigned `zammad-table` class on submission anyway.
      We need to increase specificity to override the base styles, therefore we repeat the wrapper selector.
  */
  .ProseMirror blockquote .tableWrapper.tableWrapper.tableWrapper table,
  .ProseMirror [data-signature='true'] .tableWrapper.tableWrapper table {
    @apply max-w-none border-1 dark:border-neutral-500/60 border-neutral-700/60 table-auto w-auto m-0 overflow-auto;

    td,
    th {
      @apply min-w-auto dark:border-neutral-500/60 border-neutral-700/60;
    }

    th {
      @apply bg-transparent;
    }
  }

  .bg-stripes::before {
    content: '';
    background-image: repeating-linear-gradient(
      45deg,
      var(--color-blue-400),
      var(--color-blue-400) 5px,
      var(--color-blue-700) 5px,
      var(--color-blue-700) 10px
    );
    height: calc(100% + 10px);
    width: calc(100% + 10px);
    left: -5px;
    top: -5px;
    position: absolute;
    z-index: -10;
  }
}

[data-theme='dark'] .bg-stripes::before {
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-blue-700),
    var(--color-blue-700) 5px,
    var(--color-blue-900) 5px,
    var(--color-blue-900) 10px
  );
}

@utility group-block {
  @apply rounded-3xl bg-neutral-50 p-5 text-black dark:bg-gray-500 dark:text-white;
}

@utility backface-hidden {
  backface-visibility: hidden;
}

@utility required {
  @apply after:ms-1.5 after:inline-block after:size-1.5 after:rounded-full after:bg-yellow-600 after:align-middle after:content-[''];
}

@utility ai-stripe {
  &::before {
    content: '';
    height: 2px;
    width: 100%;
    background-image: repeating-linear-gradient(
      to right,
      var(--color-blue-800),
      var(--color-pink-200)
    );
  }
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word */
@utility break-word {
  overflow-wrap: anywhere !important;
}

/* Uses to be in the @layer utilities */
@media print {
  [data-print-mode='true'] body {
    @apply invisible;

    & .print-area {
      @apply visible fixed inset-0;
    }
  }
}

@utility focus-visible-app-default {
  @apply focus:outline-transparent focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800;
}

button,
[role='button'] {
  cursor: pointer;
}
